<template>
	<view class="page-login">
		<view class="page-login__banner" v-if="loginType === 'wechat'">
			<view class="page-login__banner-brand">
				<text class="page-login__banner-brand-text">{{ envText }}</text>
			</view>  
			<view class="page-login__banner-title">用科技推动国际物流行业发展</view>
		</view>
		<view  v-else class="la-title-box">
			<view class="la-title">
				欢迎使用艾杜克直通车
				<view class="unde"></view>
			</view>
		</view>
    <view class="inside-user-title">
      仅限艾杜克平台员工使用
    </view>
		<view class="page-login__main">
			<view class="page-login__account" v-if="loginType === 'account'">
				<login-account 
					:allow-submit="isAgreement"
					@before-submit="handleLoginBeforeSubmit"
					@success="handleLoginSuccess"
          :invite-user-id="inviteUserId"
        ></login-account>
			</view>
			<view class="page-login__wechat" v-else>
				<login-wechat 
					:allow-submit="isAgreement"
					@before-submit="handleLoginBeforeSubmit"
					@success="handleLoginSuccess"
          :invite-user-id="inviteUserId"
        ></login-wechat>
			</view>
			<view class="page-login__agreement">
				<view 
					class="page-login__agreement-text" 
					:class="{'is-checked': isAgreement}"
					@click="handleAgreementClick"
				>
					我已阅读并同意<text class="is-hight" @click.stop="handleServiceAgreementClick">《艾杜克服务协议》</text>及<text class="is-hight" @click.stop="handlePrivacyAgreementClick">《艾杜克用户隐私政策》</text>
				</view>
			</view>
		</view>
		<view class="page-login__other">
			<text class="page-login__other-btn" @click="handleAccountLoginClick" v-if="loginType === 'wechat'">手机号快捷登录</text>
			<text class="page-login__other-btn" @click="handleWechatLoginClick" v-else>微信快捷登录</text>
		</view>
	</view>
</template>

<script>
	import { success, error } from '@/utils/message.js'
	import { mapActions } from 'vuex'
	import { getShareData } from '@/utils/share.js'
	import LoginAccount from './login-account.vue' 
	import LoginWechat from './login-wechat.vue'
	
	export default {
		components: {
			LoginAccount,
			LoginWechat
		},
		data() {
			return {
				loginType: 'wechat',
				returnUrl: null,
				isAgreement: false,
        inviteUserId:null
			}  
		}, 
		computed: {
			env () {
				let env = null
				// #ifdef MP-WEIXIN
				if (__wxConfig) {
					return __wxConfig.envVersion
				}
				// #endif
				return env
			},
			envText () {
				let text = ''
				if (this.env) {
					if (this.env === 'develop') { // 开发版
						//text = '开发版'
					} else if (this.env === 'trial') { // 体验版
						//text = '体验版'
					} else if (this.env === 'release') { // 正式版
						text = ''
					}
				}
				return text
			}
		},
		onLoad (urlParams) {
      if (urlParams && urlParams.returnUrl) {
				if (urlParams.returnUrl.indexOf('/pages/login/login') !== 0) {
					this.returnUrl = decodeURIComponent(urlParams.returnUrl)
				}
			}
      if(urlParams && urlParams.invite){
        this.inviteUserId=urlParams.invite
      }
		},
		onShareAppMessage () {
			return getShareData()
		},
		methods: {
			...mapActions([
				'SetUserLogin'
			]),
			handleAccountLoginClick () {
				this.loginType = 'account'
			},
			handleAgreementClick () {
				this.isAgreement = !this.isAgreement
			},
			handleWechatLoginClick () {
				this.loginType = 'wechat'
			},
			handleLoginBeforeSubmit (evt) {
				if (!this.isAgreement) {
					error('必须勾选并同意协议后才可以登录')
					evt.cancel = true
				}
			},
			handleLoginSuccess (data) {
        console.log("handleLoginSuccess",data)
				this.SetUserLogin(data).then(() => {
					success('登录成功')
					if (this.returnUrl) {
						uni.reLaunch({
							url: this.returnUrl
						})
					} else {
						uni.reLaunch({
							url: '/pages/home/home'
						})
					}
				})
			},
			handleServiceAgreementClick () {
				uni.navigateTo({
					url: '/packages/agreement/agreement-service/agreement-service'
				})
			},
			handlePrivacyAgreementClick () {
				uni.navigateTo({
					url: '/packages/agreement/agreement-privacy/agreement-privacy'
				})
			}
		}
	}
</script>

<style lang="scss">
.page-login{
	min-height: 100%;
	padding-top: 36px;
	box-sizing: border-box;
	background-size: auto 194px;
}
.page-login__banner{
	padding-top: calc(var(--status-bar-height) + 20px);
	margin-bottom: 24px;
}
.page-login__banner-title{
	text-align: center;
	height: 60rpx;
	line-height: 999px;
	overflow: auto;
	background: url('/static/images/slogin.png') no-repeat 50% 0;
	background-size: cover;
	width: 500rpx;
	margin-left: auto;
	margin-right: auto;
}
.page-login__banner-brand{
	width: 120px;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
	border-radius: 4px;
	background: url('/static/images/logo.jpg') no-repeat 50% 50%;
	background-size: auto 100%;
	position: relative;
}
.page-login__banner-brand-text{
	position: absolute;
	bottom: 0;
	height: 24px;
	line-height: 24px;
	border-radius: 12px;
	font-size: 12px;
	padding: 0 12px;
	color: #fff;
	background-color: #f36838;
	transform: scale(0.8);
	right: -60px;
}
.page-login__main {
	margin: 0 24px;
}
.page-login__agreement{
	padding-top: 16px;
	font-size: 12px;
	color: #999;
	display: flex;
	flex-direction: row;
	justify-content: center;
	text.is-hight{
		color: #F47554;
	}
}
.page-login__agreement-text{
	display: inline-block;
	position: relative;
	padding-left: 20px;
	&:before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		display: inline-block;
		width: 14px;
		height: 14px;
		border: 1px solid #eee;
		border-radius: 3px;
		vertical-align: top;
		margin-right: 6px;
	}
	&.is-checked {
		&:after {
			position: absolute;
			top: 3px;
			left: 3px;
			content: '';
			width: 8px;
			height: 5px;
			transform: rotate(-45deg);
			border: 1px solid #e95826;
			border-top: 0;
			border-right: 0;
		}
	}
}
.page-login__other{
	color: #999;
	height: 48px;
	line-height: 48px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.page-login__other-btn{
	color: #2C8FFF;
}
.page-login__wechat{
	margin-top: 12px;
}
.la-title-box{
	padding: 0 40px 0;
	.la-title {
		position: relative;
		font-size: 48rpx;
		font-weight: 600;
		color: #333333;
		line-height: 66rpx;
		margin-bottom: 58rpx;
		letter-spacing: 1px;

		.unde {
			position: absolute;
			bottom: 0;
			z-index: -1;
			width: 206rpx;
			height: 24rpx;
			background: linear-gradient(270deg, rgba(244, 117, 84, 0) 0%, #F47554 100%);
		}
	}
}
.inside-user-title{
  text-align: center;
  color: #F47554;
  font-size: 16px;

}
</style>
